<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">店铺型定向</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="近期对某类店铺感兴趣的人群，或自己店铺的重定向人群">近期对某类店铺感兴趣的人群，或自己店铺的重定向人群</span>
      <el-button @click.native="shopShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="店铺型定向"
          :visible.sync="shopDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto;" class="slotContent">
            <div class="tabbox">
              <el-tabs @tab-click="changeTab" v-model="changeHeader" type="card">
                <el-tab-pane label="其他店铺集合" name="其他店铺集合">
                  <div class="other">
                    <div class="mb20 s_fc_9">店铺集合类型及人群数量（店铺集合是基于筛选条件下的系统推荐最优质店铺；若无筛选条件，则系统推荐全部相关店铺中的最优质店铺）：</div>
                    <div class="clearfix">
                      <div class="seniorShopBox" :class="{active:index==nowIndex}" style="width: 23.5%;" v-for="(item,index) in shopCollect" @click="changeActive(item,index)">
                        <div class="seniorShopBoxName mb10">{{item.package_name}}</div>
                        <!--<div><span class="bold">497,500</span></div>-->
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="我的店铺" name="我的店铺">
                  <div class="mt20">
                    <template>
                      <el-radio v-model="radioValue" label="店铺优质人群">店铺优质人群</el-radio>
                      <el-radio v-model="radioValue" label="店铺细分人群">店铺细分人群</el-radio>
                    </template>
                  </div>
                  <div>
                    <div class="bg-fafafa">
                      <span><span class="s_fc_9">我的店铺：</span>{{mine[0].behavior_name}}</span>
                    </div>
                    <div class="market-wrap" v-show="radioValue=='店铺细分人群'">
                      <ul class="market-content">
                        <li v-for="(item,index) in myShop">
                          <div class="market-parent">
                            <label>
                              <input type="checkbox" class="mr5" @change="changeCheckbox(item,item.behavior_value)" :checked="item.status">
                              <span>{{item.behavior_name}}</span>
                            </label>
                          </div>
                          <div class="market-children clearfix">
                            <label v-for="(val,i) in item.time_windows" :class="gray(item.status)">
                              <input type="radio" class="mr5 ml5" :disabled="!item.status" :name="item.behavior_value"  @change="changeRadio(item,val,i)" :checked="val.status||i==0">
                              {{val.time_window_name}}
                            </label>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning2">
              <i class="el-icon-warning"></i>
              请至少选择一个子标签
            </a>
            <el-button @click="shopDialog=false" size="small">取 消</el-button>
            <el-button type="primary" @click="shopConfirm" size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>

    </div>
  </div>
</template>
<script>
  export default{
    props:{
      shopMsg:Array
    },
    data(){
      return{
        shopDialog: false,
        warning2: false,
        nowIndex: -1,
        changeHeader: '其他店铺集合',
        radioValue: '店铺优质人群',//radio的label初始值
        detailTip:'',
        shopCollect: [],
        myShop:[],
        mine:[{
          "behavior_name": "",
          "behavior_value": ""
        }],
        otherShopList:[],//其他店铺那边缓存的数组
        shopList:[],//最后传给下一步的数组
//        resourcesList:[]
      }
    },
    created(){
      this._getShop();
      this._getName();
    },
    methods:{
      shopShowModal(){//设置定向打开弹框
        this.shopList = this.shopMsg;
        if(this.shopList.length==0){//所有的都没有选中
          //console.log('所有的都没有选中');
          this.cancelOther();//取消其他店铺集合选中状态
          this.cancelMyshop();//取消店铺细分人群选中状态
        }else{
          if(this.shopList[0].package_name){//其他店铺被选中
            this.cancelMyshop();//取消店铺细分人群选中状态
            //其他店铺集合选中状态
            let findIndex = this.shopCollect.findIndex(item => item.package_id === this.shopList[0].package_id);
            if(findIndex != -1){
              this.nowIndex = findIndex;
            }
            this.otherShopList = JSON.parse(JSON.stringify(this.shopList));
            //console.log('其他店铺被选中')
          }else if(this.shopList == this.mine){//店铺优质人群被选中
            //console.log('店铺优质人群被选中')
            this.cancelOther();//取消其他店铺集合选中状态
            this.cancelMyshop();//取消店铺细分人群选中状态
          }else{//我的店铺被选中
            //console.log('我的店铺被选中');
            this.cancelOther();//取消其他店铺集合选中状态
            //先取消店铺细分人群选中状态，再设置我店铺细分人群选中状态
            this.cancelMyshop();
            for(var i = 0; i<this.shopList.length;i++){
              let findIndex = this.myShop.findIndex(item => item.behavior_value == this.shopList[i].behavior_value);
              this.myShop[findIndex].status = 1;//checkbox
              for(var j = 0; j<this.shopList[i].time_windows.length;j++){//添加选中的radio
                if(this.shopList[i].time_windows[j].status == 1){
                  this.myShop[findIndex].time_windows[j].status = 1;
                }
              }
            }
          }
        }
        this.shopDialog = true;
        this.warning2 = false;
      },
      cancelMyshop(){//取消店铺细分人群选中状态
        if(this.myShop.length>0){
          for(var i = 0; i<this.myShop.length;i++){
            this.$set(this.myShop[i],'status',0);
            for(var j = 0; j<this.myShop[i].time_windows.length;j++){
              delete this.myShop[i].time_windows[j].status;
            }
          }
        }
      },
      cancelOther(){//取消其他店铺集合选中状态
        this.nowIndex = -1;
        this.otherShopList=[];
      },
      _getShop(){//加载店铺集合
        this.$http.get('/zuanzhan/crowd/package').then((res) => {
          if(res.data.code == 200){
            let data = res.data;
//            console.log(data);
            this.shopCollect = data.data;
          }
        })
      },
      _getName(){//加载我的店铺名称
        this.$http.get('/zuanzhan/crowd/mine',{
          params:{
            campaign_type:2
          }
        }).then((res)=>{
//          console.log(res);
          if(res.data.code == 200 && res.data.data.length){
            let data = res.data;
            this.mine = [];
            this.mine.push(data.data[0]);
            this.$emit("mineData",this.mine);//传给父组件
            this.myShop = data.data.slice(1);
          }
        })
      },
      changeActive(item,index){//点击切换店铺集合样式
        this.nowIndex = index;
        this.otherShopList = [];
        this.otherShopList.push(item);
      },
      changeCheckbox(items,behavior_value){//点击多选框的时
        if(items.status){//取消选中状态
          this.$set(items,'status',0);
        }else{//选中状态
          this.$set(items.time_windows[0],'status',1);
          this.$set(items,'status',1);
        }
      },
      changeRadio(items,val,i){//点击单选框的时
        items.time_windows.forEach((item,index)=>{
          index == i ? item.status = 1: item.status = 0;
        })
      },
      gray(status){//单选按钮禁选字体灰色
        return status ? '':'s_fc_9';
      },
      changeTab(tab) {//记录'其他店铺集合/我的店铺'的切换的值，用来判断点击确认时选择哪边的数据
        this.changeHeader = tab.name;
      },
      shopConfirm() {//行业店铺定向的确认
        if(this.changeHeader == '其他店铺集合'){
          if(this.otherShopList.length == 0){
            this.warning2 = true;
          }else{//我的店铺
            this.warning2 = false;
            this.shopList = JSON.parse(JSON.stringify(this.otherShopList));
            this.shopDialog = false;
          }
        }else{
          if(this.radioValue == '店铺优质人群'){
            this.shopList = this.mine;
//            console.log(this.shopList)
            this.shopDialog = false;
          }else{//店铺细分人群
            let arr = [];
            this.myShop.forEach((item,index)=>{
              if(item.status == 1){
                arr.push(item);
              }
            })
            if(arr.length == 0){
              this.warning2 = true;
            }else{
              this.warning2 = false;
              this.shopList = JSON.parse(JSON.stringify(arr));
              this.shopDialog = false;
            }
          }
        }
        this.shopList.forEach((item,index)=>{
          if(item.package_name){
            item.behavior_value=item.package_id;
            item.behavior_name=item.package_name;
          }
          item.matrix_price = {};
        });
//        console.log(this.shopList)
        this.$emit("shopData",this.shopList);//传给父组件
      }
    }
  }
</script>
<style src="./style.styl" scoped lang="stylus"></style>
<style lang="stylus">
  .slotContent
    .tabbox
      padding: 20px 0;
      .el-tabs__header
        border-bottom: 0;
        .el-tabs__nav
          display: inline-block;
          height: 32px;
          border: 1px solid #eee;
          border-radius: 4px;
          background-color: #fff;
          margin-bottom: 20px;
          .el-tabs__item
            display: inline-block;
            height: 30px;
            line-height: 30px;
            color: #999;
            cursor: pointer;
            text-align: center;
            padding: 0 12px;
            border: none;
            background: transparent
          :hover
            color: #333;
          .el-tabs__item.is-active
            color: #4d7fff;
            background-color: #f0f3ff;
      .other
        padding-bottom:100px;
        .seniorShopBox
          float: left;
          margin-right: 2%;
          padding: 20px;
          cursor: pointer;
          text-align: center;
          border: 1px solid #e6e6e6;
          &:hover
            border: 1px solid #4d7fff;
          &:last-child
            margin-right: 0
          .seniorShopBoxName
            color: #999;
          .bold
            font-weight: 700;
            color: #333;
          &.active
            color: #4d7fff;
            border: 1px solid #4d7fff;
            background-color: #f0f3ff;
            .seniorShopBoxName
              color: #4d7fff;
            .bold
              color: #4d7fff;
    .bg-fafafa
      background-color: #fafafa;
      border-radius: 4px;
      padding: 20px;
      margin: 20px 0;
    .market-wrap
      .market-content
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        li
          position: relative;
          border-bottom: 1px solid #e6e6e6;
          line-height: 40px;
          &:last-child
            border-bottom: 0 none;
          .market-parent
            padding-left:20px;
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            width: 170px;
            height: 100%;
            border-right: 1px solid #e6e6e6;
            background-color: #fafafa;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            label
              height: 40px;
              span
                position: absolute;
                top: 0;
                left: 40px;
          .market-children
            min-height: auto;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 15px;
            box-sizing: border-box;
            margin-left: 160px;
            label
              float: left;
              width: 100px;
              margin-right: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              input
                margin: 0 5px;
                height: auto;
</style>



